v5.3.6

Compare Source

• Fixed an issue that caused lazy-loading of the full image (from src) rather than srcset. This problem was caused by the prev release (5.3.5).
• Use classList.toggle where possible by @​hirasso in https://github.com/dimsemenov/PhotoSwipe/pull/2008

Full Changelog: dimsemenov/PhotoSwipe@v5.3.5...v5.3.6

v5.3.5

Compare Source

• Fix rtl issues by @​Mister-Hope in https://github.com/dimsemenov/PhotoSwipe/pull/2007
• Fix types and strictNullChecks by @​Tw1N88 in https://github.com/dimsemenov/PhotoSwipe/pull/2009

v5.3.4

Compare Source

Accessibility improvements (via @​in0ni).

• added ARIA attributes to follow 'carousel' pattern,
• set/unset aria-hidden according to active slide,
• set id=pswp__items, and ensure buttons have aria-controls pointing to it

v5.3.3

Compare Source

• Fix unhandled rejection "EncodingError: The source image cannot be decoded" (by Tw1N88)
• Fix typo in attribute name (by Tw1N88)
• Fix Cannot read properties of undefined (reading 'applyCurrentZoomPan') (by Tw1N88)
• Fix (types) change types of children & gallery options according to docs (by Schleuse)

5.3.2

• Replace package.json exports "import" by "default"

5.3.1

• Reuse placeholder of content is cached

5.3.0

• Adjust zoomed-in class behaviour to reflect toggleZoom method, https://github.com/dimsemenov/PhotoSwipe/issues/1946
• Remove placeholder after image is loaded
• Allow PhotoSwipeBase for lazyLoadData method
• Append image only after it's fully loaded in Safari
• Set sizes before srcset
• Size of content is now calculated before it's appended to DOM
• Allow PhotoSwipeBase type for loader
• Replace innerHTML to preserve Trusted Types
• Allow filtering of size when slide deactivates

v5.3.2

Compare Source

v5.3.0

Compare Source

v5.2.8

Compare Source

v5.2.7

Compare Source

v5.2.6

Compare Source

v5.2.5

Compare Source

v5.2.4

Compare Source

v5.2.2

Compare Source

Major update that changes initialization method!

New demo | New docs

What's new

Code quality and rewrite in ES6
The script is now distributed as an ES module and does not require a build step to use.

Simpler initialization and dynamic import support
PhotoSwipe now supports dynamic import and does not block page rendering.

<script type="module">
import Lightbox from './photoswipe-lightbox.esm.js';
const lightbox = new Lightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('./photoswipe.esm.js')
});
lightbox.init();
</script>

Animation and gesture engine update
Improved performance of most animations, touch gestures should feel more fluid now. The initial opening or closing transition can be run from cropped thumbnails.

Single CSS file and no external assets
Using CSS variables, default icons are dynamically generated and tiny.

Built-in responsive images support
PhotoSwipe also dynamically loads larger images as the user zooms via srcset.

Open images in zoomed state
It's now much easier to control the zoom level.

Removed features from the core
Some built-in features were removed in v5, either because they are using outdated technology or just rarely used. Some of them are or will be replaced by a plugin. These include:

• History API (#hash-based navigation is outdated)
• Social sharing (unreliable URL, lack of Opengraph support)
• Fullscreen button (rarely used, double fullscreen). Related example in docs →
• Caption (accessibility problems). Refer to the caption section of docs.
• Inline gallery support (v5 is mainly designed to be used as a dialog).

v5.2.1

Compare Source